<template>
  <div id="dialogTaskTDetail">
    <el-dialog
      class="about-set"
      title="长视频详情"
      :visible.sync="dialogData.isShow"
      width="700px"
      :before-close="labelHandleClose"
    >
      <div class="task-detail-con">
        <div class="detail-left" v-if="formData.user">
          <img :src="formData.user.avatar" alt="头像" />
        </div>
        <div class="detail-right" v-if="formData.user">
          <span style="font-size: 15px;font-weight: bold">{{
            formData.user.nickname
          }}</span>
          <dl>
            <dt></dt>
            <dd>
              <span>{{ formData.user.dpAccount }}</span>
              <span>创建时间：{{ formData.createdDate | timeToTime() }}</span>
            </dd>
            <dd>
              <span v-html="formData.title"></span>
            </dd>
            <dd class="content">
              <span v-html="formData.content"></span>
            </dd>
          </dl>
          <div class="video-face-box">
            <videoFace :vid="formData.vid"></videoFace>
          </div>
          <ul class="foot-list">
            <li>评论 {{ formData.commentCount }}</li>
            <li>点赞 {{ formData.likeCount }}</li>
            <li>分享 {{ formData.shareAmount }}</li>
            <li>
              最新编辑者:
              {{ LatestEditor ? LatestEditor : '-' }}
            </li>
          </ul>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="cancelLabel">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getDetail, getEditorList } from '@/api/longVidManagement/videoCheck'
import videoFace from '@common/videoFace'

export default {
  name: 'DialogTaskTDetail',
  msg: '长视频详情',
  components: {
    videoFace
  },
  props: ['dialogData'],
  data() {
    return {
      LatestEditor: '', // 最新编辑者
      formData: {}
    }
  },
  mounted() {
    this.id = this.dialogData.params
    this.getFormData()
    this.getLatest()
  },
  methods: {
    getFormData() {
      let params = { id: this.id }
      getDetail(
        this.id,
        params,
        (response) => {
          this.formData = response
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    getLatest() {
      getEditorList(this.id, (response) => {
        this.LatestEditor = response
      })
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.id = null
      this.dialogData.params = null
      this.dialogData.isShow = false
    }
  }
}
</script>

<style lang="less">
#dialogTaskTDetail {
  .task-detail-con {
    display: table;
    color: #333;
    margin: 0 20px;
    .content {
      color: #555;
    }
    .detail-left,
    .detail-right {
      display: table-cell;
      .detail-top {
        font-weight: 400;
        border: 1px solid #ccc;
        padding: 2px 5px;
        margin: 0 5px;
        border-radius: 2px;
      }
      .as-code-number {
        color: #ccc;
      }
    }

    .detail-left {
      width: 80px;
      vertical-align: top;

      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }

    .pic-box {
      width: 504px;
      height: 300px;

      &.single-pic {
        height: 200px;
      }
    }

    .detail-right {
      dl {
        margin-bottom: 10px;

        dt {
          font-size: 15px;
          line-height: 30px;
          margin-bottom: 10px;
          font-weight: bold;
        }

        dd {
          font-size: 14px;
          line-height: 22px;
          margin-bottom: 8px;

          &:nth-of-type(1) {
            span {
              margin-right: 10px;
            }
          }
        }
      }

      ul.foot-list {
        padding: 20px 0 15px;
        overflow: hidden;

        li {
          float: left;
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
